<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页 - 实验报告</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        /* 基础样式保持原模板风格 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }
        body {
            line-height: 1.6;
            color: #333;
            background-color: #f9f9f9;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        .header {
            background-color: #2d3748;
            color: white;
            padding: 1rem 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .logo h1 {
            font-size: 1.8rem;
        }
        .nav-menu {
            display: flex;
            list-style: none;
        }
        .nav-item {
            margin-left: 2rem;
        }
        .nav-link {
            color: white;
            text-decoration: none;
            font-size: 1.1rem;
            transition: color 0.3s ease;
        }
        .nav-link:hover {
            color: #4299e1;
        }
        .hamburger {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
        }
        .bar {
            width: 25px;
            height: 3px;
            background-color: white;
            border-radius: 3px;
        }
        main {
            padding: 4rem 0;
        }
        .section {
            margin-bottom: 6rem;
            background-color: white;
            padding: 3rem;
            border-radius: 8px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.05);
        }
        .section-title {
            text-align: center;
            font-size: 2rem;
            margin-bottom: 2rem;
            color: #2d3748;
            position: relative;
        }
        .section-title::after {
            content: '';
            display: block;
            width: 80px;
            height: 4px;
            background-color: #4299e1;
            margin: 10px auto;
            border-radius: 2px;
        }
        .section-alt {
            background-color: #f0f8fb;
        }
        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }
        .info-item {
            font-size: 1.1rem;
        }
        .info-item strong {
            color: #4299e1;
            margin-right: 0.5rem;
        }
        .list-container {
            margin: 1.5rem 0;
            padding-left: 1.5rem;
        }
        .list-container li {
            margin: 0.8rem 0;
        }
        .code-display {
            background-color: #f7fafc;
            padding: 2rem;
            border-radius: 8px;
            overflow-x: auto;
            margin: 2rem 0;
            border: 1px solid #e2e8f0;
        }
        .code-placeholder {
            color: #718096;
            font-style: italic;
            text-align: center;
            padding: 2rem 0;
            border: 2px dashed #cbd5e0;
            border-radius: 4px;
        }
        .problem-card {
            background-color: #e8f4f8;
            padding: 1.5rem;
            border-radius: 8px;
            margin: 1.5rem 0;
        }
        .problem-title {
            color: #2d3748;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        .footer {
            background-color: #2d3748;
            color: white;
            text-align: center;
            padding: 2rem 0;
            margin-top: 6rem;
        }
        /* 响应式调整 */
        @media (max-width: 768px) {
            .nav-menu {
                display: none;
                flex-direction: column;
                position: absolute;
                top: 70px;
                left: 0;
                width: 100%;
                background-color: #2d3748;
                padding: 1rem 0;
                box-shadow: 0 5px 10px rgba(0,0,0,0.1);
            }
            .nav-item {
                margin: 0.5rem 0;
                text-align: center;
            }
            .hamburger {
                display: flex;
            }
            .section {
                padding: 2rem 1rem;
            }
        }
    </style>
</head>
<body>
    <header class="header">
        <nav class="navbar container">
            <div class="logo">
                <h1>HTML个人主页实验报告</h1>
            </div>
            <ul class="nav-menu">
                <li class="nav-item"><a href=" " class="nav-link">基本信息</a ></li>
                <li class="nav-item"><a href="#experiment-purpose" class="nav-link">实验目的</a ></li>
                <li class="nav-item"><a href="#experiment-env" class="nav-link">实验环境</a ></li>
                <li class="nav-item"><a href="#experiment-content" class="nav-link">实验内容</a ></li>
                <li class="nav-item"><a href="#experiment-result" class="nav-link">实验结果</a ></li>
                <li class="nav-item"><a href="#experiment-summary" class="nav-link">实验总结</a ></li>
            </ul>
            <div class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
        </nav>
    </header>

    <main class="container">
        <!-- 基本信息 -->
        <section id="basic-info" class="section">
            <h2 class="section-title">基本信息</h2>
            <div class="info-grid">
                <div class="info-item"><strong>姓名</strong>：欧柠睿</div>
                <div class="info-item"><strong>学号</strong>：222025321062105</div>
                <div class="info-item"><strong>班级</strong>：软工中外4班</div>
            </div>
        </section>

        <!-- 实验目的 -->
        <section id="experiment-purpose" class="section section-alt">
            <h2 class="section-title">实验目的</h2>
            <ul class="list-container">
                <li>1. 掌握HTML文档的基本结构和语法</li>
                <li>2. 熟练使用常用的HTML标签构建页面内容</li>
                <li>3. 理解HTML语义化的重要性并应用</li>
                <li>4. 掌握列表、表格等元素展示结构化数据</li>
                <li>5. 学会使用图片、链接等媒体元素</li>
                <li>6. 了解表单的创建和使用方法</li>
            </ul>
        </section>

        <!-- 实验环境 -->
        <section id="experiment-env" class="section">
            <h2 class="section-title">实验环境</h2>
            <ul class="list-container">
                <li><strong>操作系统</strong>：[例如：Windows 10 / macOS]</li>
                <li><strong>开发工具</strong>：[例如：VS Code / Sublime Text]</li>
                <li><strong>浏览器</strong>：[例如：Chrome / Firefox / Safari]</li>
            </ul>
        </section>

        <!-- 实验内容与步骤 -->
        <section id="experiment-content" class="section section-alt">
            <h2 class="section-title">实验内容与步骤</h2>
            <h3 style="font-size: 1.5rem; margin: 1.5rem 0; color: #4a5568;">代码展示</h3>
            <div class="code-display">
                <!-- 预留代码添加空间，可直接粘贴HTML代码替换占位符 -->
                <div class="code-placeholder">
                    <br>
                    
                    <html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网页</title>
    <style>
        /* 原有样式保留 */
        .glow-title {
            background: linear-gradient(90deg, #ff0054, #ff2d00, #ffd500, #00ff72, #00b4ff, #7a00ff, #ff0054);
            background-size: 600% 100%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: glow 10s linear infinite;
            font-size: 2.5rem;
            text-align: center;
            margin: 0;
        }
        @keyframes glow {
            0% { background-position: 0 0; }
            100% { background-position: 600% 0; }
        }
        nav ul {
            list-style: none;
            padding: 0;
            text-align: center;
        }
        nav li {
            display: inline-block;
            margin: 0 15px;
        }
        body {
            margin: 0;
            padding: 0;
            background-image: url("https://ts1.tc.mm.bing.net/th/id/R-C.5642ddd439c72feaa95c40beb50425c5?rik=SNUbkqvFPyEZJw&amp;riu=http%3a%2f%2fwww.guangyuanol.cn%2fuploads%2fallimg%2f220901%2f2301433939-2.jpg&amp;ehk=fjmQkLCVYOOTm6dR2fJIqiUpnHB46Dpb9IdQBCKX4Sk%3d&amp;risl=&amp;pid=ImgRaw&amp;r=0");
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            background-repeat: no-repeat;
        }
        main {
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.85);
            border-radius: 8px;
        }
        h2 {
            text-align: center;
        }
        .brightness-animation {
            animation: brightnessCycle 3s ease-in-out infinite alternate;
            max-width: 300px;
            height: auto;
            border-radius: 8px;
            cursor: pointer;
        }
        @keyframes brightnessCycle {
            0% { filter: brightness(0.7); }
            100% { filter: brightness(1.3); }
        }

        /* 名刀司命图片动画样式 */
        .mingdao {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-width: 200px;
            opacity: 0;
            pointer-events: none;
            z-index: 9999;
            animation: mingdaoFade 2s ease-out forwards;
        }
        @keyframes mingdaoFade {
            0% { 
                opacity: 1;
                filter: brightness(1.5); 
            }
            50% { 
                filter: brightness(1); 
            }
            100% { 
                opacity: 0;
                filter: brightness(0.3);
                transform: translate(-50%, -50%) scale(0.8);
            }
        }
    </style>
</head>
<body>
    <header>
        <h1 class="glow-title">欢迎来到韩信之神梦泪的网站</h1>
        <nav>
            <ul>
                <li><a href="https://space.bilibili.com/108569350?spm_id_from=333.337.0.0" >首页</a ></li>
                <li><a href="https://www.bilibili.com/video/BV152y6BJE1G/?spm_id_from=333.337.search-card.all.click&vd_source=d2161dd21b4b281420367964b63a3b38" >关于</a ></li>
                <li><a href="https://www.bilibili.com/video/BV1Sg4y1c7dX/?spm_id_from=333.337.search-card.all.click&vd_source=d2161dd21b4b281420367964b63a3b38" >联系</a ></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section>
            <h2>最新动态</h2>
            <p>梦泪:"梦可能会留泪，但不会就此倒下"</p >
            <div style="text-align: center; margin: 20px 0;">
                <!-- 梦泪图片：绑定click事件 -->
                <img class="brightness-animation" 
                     src="https://ts1.tc.mm.bing.net/th/id/OIP-C.wij05njcutyNLiNVQZw3wQHaHg?rs=1&amp;pid=ImgDetMain&amp;o=7&amp;rm=3" 
                     alt="梦泪严肃哭脸头像 - 抖音" 
                     onclick="showMingdaoAndRedirect()">
            </div>
        </section>
    </main>
    
    <footer>
        <p>&copy; ALL RIGHTS RESERVED</p >
    </footer>

    <!-- 名刀司命图片容器 -->
    <div id="mingdaoContainer"></div>

    <script>
        // 点击后显示名刀动画，结束后跳转B站视频
        function showMingdaoAndRedirect() {
            // 创建名刀图片
            const mingdaoImg = document.createElement('img');
            mingdaoImg.src = "https://pic.kts.g.mi.com/d618c58b09286ee0657da928b60507cb8074879751687537358.jpg"; // 预留名刀司命图片URL，填入即可
            mingdaoImg.alt = "名刀司命";
            mingdaoImg.className = "mingdao";

            // 添加到页面
            const container = document.getElementById('mingdaoContainer');
            container.appendChild(mingdaoImg);

            // 动画结束后（2秒）跳转指定B站链接，新标签页打开
            setTimeout(() => {
                container.removeChild(mingdaoImg);
                window.open("https://www.bilibili.com/video/BV1KcGAzYERe/?spm_id_from=333.337.search-card.all.click&vd_source=d2161dd21b4b281420367964b63a3b38", "_blank");
            }, 2000); // 时长与CSS动画保持一致
        }
    </script>
</body>
</html>
                    
                </div>
            </div>
        </section>

        <!-- 实验结果与分析 -->
        <section id="experiment-result" class="section">
            <h2 class="section-title">实验结果与分析</h2>
            
            <h3 style="font-size: 1.5rem; margin: 1.5rem 0; color: #4a5568;">页面结构分析</h3>
            <p style="margin-bottom: 1rem;">分析个人主页的HTML结构：</p >
            <ul class="list-container">
                <li>- 使用的HTML5语义化标签：&lt;header&gt;、&lt;nav&gt;、&lt;main&gt;、&lt;section&gt;、&lt;footer&gt;、&lt;form&gt;等</li>
                <li>- 页面结构是否合理：√</li>
                <li>- 标签嵌套是否正确：√</li>
            </ul>

            <h3 style="font-size: 1.5rem; margin: 1.5rem 0; color: #4a5568;">标签使用情况</h3>
            <p style="margin-bottom: 1rem;">项目中使用的主要HTML标签及其用途：</p >
            <ul class="list-container">
                <li>1. &lt;h1&gt;-&lt;h6&gt;：用于标题层级展示</li>
                <li>2. &lt;p&gt;：用于文本段落展示</li>
                <li>3. &lt;img&gt;：用于图片展示</li>
                <li>4. &lt;a&gt;：用于页面内锚点或外部链接跳转</li>
                <li>5. &lt;ul&gt;/&lt;ol&gt;/&lt;li&gt;：用于构建列表数据</li>
                <li>6. &lt;table&gt;/&lt;tr&gt;/&lt;th&gt;/&lt;td&gt;：用于展示结构化表格数据</li>
                <li>7. &lt;form&gt;/&lt;input&gt;/&lt;textarea&gt;：用于创建交互表单</li>
                <li>8. 其他标签：&lt;footer&gt;/&lt;header&gt;/&lt;section&gt;等用于规范页面语义结构</li>
            </ul>

            <h3 style="font-size: 1.5rem; margin: 1.5rem 0; color: #4a5568;">遇到的问题及解决方案</h3>
            <div class="problem-card">
                <div class="problem-title">问题描述</div>
                <p>在制作动画过程中不清楚具体语法嵌套结构</p >
            </div>
            <div class="problem-card">
                <div class="problem-title">解决方案</div>
                <p>利用AI/B站等软件进行拓展学习后理解script语言的简易动画制作原理</p >
            </div>
        </section>

        <!-- 实验总结与心得 -->
        <section id="experiment-summary" class="section section-alt">
            <h2 class="section-title">实验总结与心得</h2>
            
            <h3 style="font-size: 1.5rem; margin: 1.5rem 0; color: #4a5568;">实验收获</h3>
            <ul class="list-container">
                <li>1. 利用AI进行基本编程语言的初步编写</li>
                <li>2. 通过网络平台找寻相关资料来进行拓展性质的学习</li>
                <li>3. 在与同学探讨合作中寻求共同成功</li>
            </ul>

            <h3 style="font-size: 1.5rem; margin: 1.5rem 0; color: #4a5568;">存在的不足</h3>
            <ul class="list-container">
                <li>1. 缺乏创新思维</li>
                <li>2. 思路不够明确清晰</li>
            </ul>

            <h3 style="font-size: 1.5rem; margin: 1.5rem 0; color: #4a5568;">改进方向</h3>
            <ul class="list-container">
                <li>1. 和AI探讨相关专业知识</li>
                <li>2. 在更多项目实践中逐渐积累经验</li>
            </ul>
        </section>
    </main>

    <footer class="footer">
        <div class="container">
            <p>&copy; 2025 欧柠睿 HTML实验报告. 保留所有权利.</p >
            <p>本页面使用HTML5和CSS3构建，采用响应式设计</p >
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>
